<template>
  <div class="content_workFlow" id="content_workFlow">
    <div class="tips">
      我的工作流
    </div>
    <a-tabs v-model:activeKey="tabActive" @change="changeTopTabs">
      <a-tab-pane key="1" tab="待办理">
      </a-tab-pane>
      <a-tab-pane key="2" tab="已办理">
      </a-tab-pane>
      <a-tab-pane key="3" tab="逾期未办理">
      </a-tab-pane>
    </a-tabs>
    <div class="content_workFlow_detail">
      <div class="content_workFlow_header item">
        <!-- 所属访客类型模块部分 -->
        <section class="options">
          <span class="options_label">类型筛选:</span>
          <div class="options_content">
            <span v-for="item in formData.flowSceneOption" :key="item.value"
              :class="formData.flowScene === item.value ? 'activeOption' : ''" @click="getTableList(item)">{{
                item.label
              }}</span>
          </div>
        </section>
        <div class="searchName">
          <a-input v-model:value="searchName" placeholder="请输入标题名称" style="width: 192px; height:32px">
            <template #suffix>
              <i class="iconfont icon-search" @click="getTableList('')" @blur="getTableList('')"></i>
            </template>
          </a-input>
        </div>
      </div>
      <div class="content_workFlow_charts">
        <div class="scrollSection" :class="tabActive == '3' ? 'noleft' : ''">
          <!-- 表格展示部分 -->
          <baseTable :columns="columns[`mailBoxColumns${tabActive}`]" :dataSource="configData.records" :isSelect="true"
            :scroll="scroll" ref="sensitiveBaseTables" :simple="true" :isShowPagination="isShowPagination"
            :total="configData.total" @changePage="changePage" :rowSelection="1">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.ellipsis">
                <table-tool-tip :text="text" :column="column"></table-tool-tip>
              </template>
              <template v-if="column.dataIndex === 'auditResult'">
                <span> {{ record.actionCode == "disagree" ? '审核不通过' : '审核通过' }}</span>
              </template>
              <template v-if="column.dataIndex === 'remainTime'">
                <!-- <span> {{ record.remainTime ? transverterMss(2854 * 60 * 1000 || 0) : '' }}</span> -->
                <span> {{ record.remainTime ? transverterMss(record.remainTime * 1000 * 60 || 0) : '' }}</span>
              </template>
              <template v-if="column.dataIndex === 'oparation'">
                <div v-if="tabActive == '1'">
                  <a class="eidtRecords" @click="eidtRecord(record, '1')">预览</a>
                  <a class="eidtRecords" @click="eidtRecord(record, '2')">{{ record.isEditAuditTarget ? '编辑内容' : '查看内容' }}
                  </a>
                  <a class="eidtRecords" @click="eidtRecord(record, '3')">审核通过</a>
                  <a-popconfirm placement="topRight" ok-text="审核拒绝" cancel-text="取消"
                    :showCancel="record.children && record.children.length ? false : true"
                    @confirm="rejectOrResolveFlow(record, 4)">
                    <template #title>
                      <p style="width: 197px">
                        是否确认拒绝？
                      </p>
                    </template>
                    <a @click="eidtRecord(record, '4')">审核拒绝</a>
                  </a-popconfirm>
                </div>
                <div v-if="tabActive == '2'">
                  <a class="eidtRecords" @click="eidtRecord(record, '1')">预览</a>
                </div>
              </template>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeMount, onUnmounted, reactive, watch, computed } from "vue";
import request from "@/api/index";
import columns from "@/components/table/tableConfig/tableColumn/workSpace";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { message } from "ant-design-vue";
import { useRouter, } from "vue-router";
// type flowColumns
interface dataSourceType {
  [propName: string]: any;
}
//data
//router
const router = useRouter();
const searchName = ref();
const sectionValue = ref();

const getSite_ref = ref();
const formData = reactive<dataSourceType>({
  flowScene: '',
  flowSceneOption: [
    {
      label: '全部',
      value: ''
    }, {
      label: '内容发布',
      value: 1
    }
  ],
})
//表格展示
const tabActive = ref('1'); //选择时间范围
//表格数据
let configData = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
const isShowPagination = true; // 是否需要配分页器
let scroll: dataSourceType = reactive({ y: "", isFixed: false }); // 表单滚动设置
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
//methods
const changeTopTabs = () => {
  formData.flowScene = '';
  searchName.value = '';
  pageCurrent.value = 1;
  pageSize.value = 10;
  getTableList('');
}
const handleChange_select = () => {
  nextTick(() => {
  })
}
const handleChange = (value: any) => {//选择变化
  nextTick(() => {
    sectionValue.value = getSite_ref.value.sectionValue;
  });
};
// 转化时分
const transverterMss = (time: number) => {
  let result = (time || 0) / 1000;
  var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
  var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
  var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
  return h + ':' + m
};
// 获取列表
const getTableList = async (item: any) => {
  if (item) {
    formData.flowScene = item.value;
  }
  let api = ['mytobeDealWith', 'mycompleteRecords', 'myautoRevokeRecords'];
  let params: any = {
    flowScene: formData.flowScene,
    name: searchName.value,
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value
  }
  let res = await request[api[+tabActive.value - 1]](params);
  nextTick(() => {
    // 1内容类型 2 投票调查 3 领导信箱
    res.records.forEach((item: any) => {
      item.typeName = item.flowScene == 1 ? '内容发布' : item.flowScene == 2 ? '投票调查' : '领导信箱';
    });
    configData.records = res.records;
    configData.total = res.total
    nextTick(() => {
      let obj = getTableScroll(74, "content_workFlow", 100);
      scroll.y = obj.y;
      scroll.isFixed = obj.isFixed;
    });
  })

}
const eidtRecord = async (record: dataSourceType, type: number | string) => {
  // type 1 预览， 2 编辑内容， 3 审核通过， 4 审核拒绝
  if(type == 1) {
    window.open(record?.businessParam?.previewUrl)
  }
  if (type == 3) {
    rejectOrResolveFlow(record, type);
  }
  if (type == 2) {
    router.push({
      path: "/content/newContent",
      query: {
        contentId: record.businessParam.contentId,
        channelId: '',
        id: record.businessParam.modelId,
        modelName: record.businessParam.modelName,
      },
    });

  }
}
const rejectOrResolveFlow = (record: dataSourceType, type: number | string) => {
  let params = {
    actionCode: type == 3 ? 'agree' : 'disagree',
    nodeFlowId: record.nodeFlowId
  }
  request.auditworkFlow(params).then((res: any) => {
    if (res.code == '00000 00000') {
      getTableList('');
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  })

}

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getTableList('');
};
//onMounted

onMounted(() => {
  getTableList('');
});

</script>

<style lang="less" scoped>
.content_workFlow {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background: #fff;
  overflow: hidden;

  .charts {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 24px;

    .pv_uvlists {
      display: flex;
      padding: 24px;

      .pv_uvlists_item {
        width: 180px;
        display: flex;
        flex-direction: column;

        div:nth-of-type(2) {
          margin-top: 8px;
        }
      }
    }
  }

  .content_workFlow_detail {
    height: calc(100% - 40px);

    .content_workFlow_charts {
      height: calc(100% - 40px);
    }

    .content_workFlow_header {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      padding-top: 24px;
      justify-content: space-between;
      margin-bottom: 24px;

    }
  }

  .tendencyOnlinePie_line {
    display: flex;

    #tendencyOnlinePie {
      width: 380px;
      height: 300px;
    }

    #tendencyOnline {
      flex: 1;
      height: 300px;
      margin-bottom: 24px;
    }
  }

  .sourceUrl {
    cursor: pointer;
    color: #1F6DED;
  }

  .tips {
    font-size: 18px;
    color: #333;
  }
}
</style>
<style lang="scss">
.content_workFlow_detail {

  .options {
    display: flex;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      margin-right: 12px;
      border: 1px solid var(--theme_button_bg_color, #1F6DED);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1F6DED);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1F6DED);
      }
    }
  }

  .eidtRecords {
    margin-right: 12px;

  }

  .noleft .ant-table-thead .ant-table-cell:nth-last-of-type(1) {
    text-align: left;
  }
}

.content_workFlow_charts {
  .ant-table-column-sorters {
    max-width: 100px;
  }
}

.openorclose {
  display: flex;
  align-items: center;
}
</style>